<div class="panel panel-default panel-intro">
    <div class="panel-heading">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#one" data-toggle="tab">设备OEE分析</a></li>
        </ul>
    </div>
    <div class="panel-body">
        <div id="myTabContent" class="tab-content">
            <div class="tab-pane fade active in" id="one">
                <div class="widget-body no-padding">
                    <div id="toolbar" class="toolbar">
                        <div class="form-inline">
                            <div class="form-group">
                                <label>开始日期:</label>
                                <input type="text" class="form-control datetimepicker" id="start_date" value="{:date('Y-m-01')}" data-date-format="yyyy-mm-dd">
                            </div>
                            <div class="form-group">
                                <label>结束日期:</label>
                                <input type="text" class="form-control datetimepicker" id="end_date" value="{:date('Y-m-d')}" data-date-format="yyyy-mm-dd">
                            </div>
                            <a href="javascript:;" class="btn btn-primary btn-search"><i class="fa fa-search"></i> 查询</a>
                            <a href="javascript:;" class="btn btn-success btn-refresh" title="刷新"><i class="fa fa-refresh"></i></a>
                        </div>
                    </div>
                    <table id="table" class="table table-striped table-bordered table-hover" width="100%">
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        var options = {
            url: $.fn.bootstrapTable.defaults.extend.index_url,
            pk: 'id',
            sortName: 'oee',
            sortOrder: 'desc',
            queryParams: function(params) {
                params.start_date = $("#start_date").val();
                params.end_date = $("#end_date").val();
                return params;
            },
            columns: [
                [
                    {checkbox: true},
                    {field: 'id', title: 'ID'},
                    {field: 'equipment_name', title: '设备名称'},
                    {field: 'stat_date', title: '统计日期', formatter: Table.api.formatter.date},
                    {field: 'availability', title: '时间稼动率(%)', formatter: function(value) {
                        return '<span class="label label-' + (value >= 90 ? 'success' : (value >= 80 ? 'warning' : 'danger')) + '">' + value + '%</span>';
                    }},
                    {field: 'performance', title: '性能稼动率(%)', formatter: function(value) {
                        return '<span class="label label-' + (value >= 95 ? 'success' : (value >= 85 ? 'warning' : 'danger')) + '">' + value + '%</span>';
                    }},
                    {field: 'quality', title: '良品率(%)', formatter: function(value) {
                        return '<span class="label label-' + (value >= 99 ? 'success' : (value >= 95 ? 'warning' : 'danger')) + '">' + value + '%</span>';
                    }},
                    {field: 'oee', title: 'OEE(%)', formatter: function(value) {
                        return '<span class="label label-' + (value >= 85 ? 'success' : (value >= 65 ? 'warning' : 'danger')) + '"><strong>' + value + '%</strong></span>';
                    }},
                    {field: 'planned_time', title: '计划运行时间(小时)'},
                    {field: 'downtime', title: '停机时间(小时)'},
                    {field: 'actual_output', title: '实际产量'},
                    {field: 'defect_quantity', title: '不良品数'}
                ]
            ]
        };
        var table = $("#table").bootstrapTable(options);
        
        $(document).on("click", ".btn-search", function () {
            $("#table").bootstrapTable('refresh');
        });
        
        $(document).on("click", ".btn-refresh", function () {
            $("#table").bootstrapTable('refresh');
        });
    });
</script>

